import styles from './index.module.less';
import { RegisterChart } from '@hdtd/components/test/RegisterChart';
import { ERegisterChartType } from '@/types/common/ctx-init';
import { useEffect, useState } from 'react';
import { registerRegisterChartPresets } from '@hdtd/components/test/RegisterChart';

registerRegisterChartPresets(ERegisterChartType.Bar, {
  createOption: ({ direction }) => {
    const directionOpt =
      direction === 'level'
        ? {
            labelAxis: 'yAxis',
            valueAxis: 'xAxis',
            encodeLabel: 'y',
            encodeValue: 'x'
          }
        : {
            labelAxis: 'xAxis',
            valueAxis: 'yAxis',
            encodeLabel: 'x',
            encodeValue: 'y'
          };
    return {
      tooltip: {},
      [directionOpt.labelAxis]: {
        type: 'category'
      },
      [directionOpt.valueAxis]: {
        type: 'value'
      },
      series: [
        {
          type: 'bar',
          encode: {
            [directionOpt.encodeLabel]: 'label',
            [directionOpt.encodeValue]: 1
          }
        },
        {
          type: 'bar',
          encode: {
            [directionOpt.encodeLabel]: 'label',
            [directionOpt.encodeValue]: 2
          }
        }
      ]
    };
  }
});

registerRegisterChartPresets(ERegisterChartType.Pie, {
  createOption: ({ colors }) => {
    return {
      tooltip: {},
      color: colors,
      series: {
        type: 'pie',
        encode: {
          value: 1,
          itemName: 0
        }
      }
    };
  }
});

const mock = [
  {
    label: '周一',
    value: 20,
    value1: 15
  },
  {
    label: '周二',
    value: 35,
    value1: 70
  },
  {
    label: '周三',
    value: 47,
    value1: 50
  },
  {
    label: '周四',
    value: 58,
    value1: 116
  },
  {
    label: '周五',
    value: 92,
    value1: 130
  }
];

const RCTest = () => {
  const [show, setShow] = useState(true);
  const [barDirection, setBarDirection] = useState<'level' | 'vertical'>('vertical');
  useEffect(() => {
    return () => {
      console.log('卸载了');
    };
  }, []);
  return (
    <div className={styles['box-rc-test']}>
      <div
        style={{ height: '50%' }}
        onClick={() => setBarDirection((value) => (value === 'level' ? 'vertical' : 'level'))}
      >
        {show && (
          <RegisterChart
            type={ERegisterChartType.Bar}
            eChartsReactProps={{
              style: {
                height: '100%'
              }
            }}
            direction={barDirection}
            dataset={{
              source: mock,
              dimensions: ['label', 'value', 'value1']
            }}
          />
        )}
      </div>
      <div style={{ height: '50%' }} onClick={() => setShow((value) => !value)}>
        <RegisterChart
          type={ERegisterChartType.Pie}
          eChartsReactProps={{
            style: {
              height: '100%'
            }
          }}
          colors={['red', 'pink', 'skyblue', 'purple', 'green']}
          dataset={{
            source: mock,
            dimensions: ['label', 'value', 'value1']
          }}
        />
      </div>
    </div>
  );
};

export default RCTest;
